<template>
  <div class="personal">
    <el-card class="box-card">
      <div class="text item">{{ "个人中心" }}</div>
      <div class="text item">{{ "管理员ID:&emsp;" + user.id }}</div>
      <div class="text item">{{ "账号:&emsp;" + user.account }}</div>
      <div class="text item">{{ "用户组:&emsp;" + user.userGroup }}</div>
      <div class="text item">{{ "创建时间:&emsp;" + user.ctime }}</div>
      <div class="text item">
        {{ "头像:&emsp;" }}
        <el-upload
          :on-success="handleAvatarSuccess"
          class="avatar-uploader"
          action="http://127.0.0.1:5000/users/avatar_upload"
          :show-file-list="false"
          :data='userId'
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button @click="handleEdit" size="small" type="primary"
          >退出登陆</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
import { accountinfo } from "@/apis/users.js";
import {bus} from '@/utils/utils.js'
export default {
  data() {
    return {
      user: {},
      imageUrl: "",
      userId:{id:localStorage.id}
    };
  },
  methods: {
    handleEdit() {
      localStorage.removeItem("token")
      location.reload()
   },
    handleAvatarSuccess(res, file) {
      // console.log(res);
      this.imageUrl = URL.createObjectURL(file.raw);
      bus.$emit('changehead',this.imageUrl)
    },
  },
  created() {
    this.id = localStorage.getItem("id");
    console.log(this.id);
    accountinfo({ id: this.id })
      .then((res) => {
        // console.log(res.data);

        let date = new Date(res.data.accountInfo.ctime);
        res.data.accountInfo.ctime =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();
        this.tableData = res.data.data;
        this.total = res.data.total;
        this.user = res.data.accountInfo;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="less" scoped>
.personal {
  padding: 20px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  border-bottom: 1px solid #ccc;
}
.header {
  display: flex;
  line-height: 50px;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>